<template>
  <div>
    <el-switch
      v-model="cg"
      active-color="#13ce66"
      inactive-color="#ff4949"
      @change="loop"
    >
    </el-switch>
    <div ref="myDiv" class="radar-echart" />
  </div>
</template>

<script>
// import { set } from 'js-cookie'
// import * as echarts from 'echarts'
export default {
  data() {
    return {
      cg: false,
      opt: {
        radar: {
          // shape: 'circle',
          axisName: {
            // textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
            // }
          },
          // shape: 'circle',
          indicator: [
            { name: '工作效率', max: 100 },
            { name: '考勤', max: 100 },
            { name: '积极性', max: 100 },
            { name: '帮助同事', max: 100 },
            { name: '自主学习', max: 100 },
            { name: '正确率', max: 100 }
          ]
        },
        series: [
          {
            type: 'radar',
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
  },

  methods: {
    initChart () {
      this.myChart = this.echarts.init(this.$refs.myDiv)
      // 绘制图表

      this.opt.series[0].data = [
        {
          value: [32, 30, 20, 35, 50, 18],
          name: '张三'
        }
      ]
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.opt)
    },
    loop(val) {
      if (this.st) {
        console.log(val)
        clearInterval(this.st)
        this.st = null
        // return
      } else {
        // clearTimeout()
        this.st = setInterval(this.change, 1000)
      }
    },
    change() {
      const per = [{ value: [], name: '张三' }]
      for (let index = 0; index < 6; index++) {
        per[0].value.push(Math.floor(Math.random() * 100 + 1))
      }
      // console.log(per)
      this.opt.series[0].data = per
      this.myChart.setOption(this.opt)
    }
  }
}

</script>

<style>
.radar-echart{
  height: 400px;
  width: 100%;
}
</style>
